<template>
  <div class="tabin-config-dialog">
    <div class="header">
      <span class="ft-bold">图标项</span>
      <el-button type="text" icon="el-icon-document-copy" plain @click="copyVisible = true">
        复制
      </el-button>
      <el-button type="text" icon="el-icon-plus" plain @click="handleRowUpdate('add')">
        添加
      </el-button>
    </div>
    <el-card v-for="(item, index) in selectValue" :key="index" shadow="always">
      <div class="card-row">
        <span>{{ item.titleZh }}</span>
        <div class="operation">
          <el-button
            type="text"
            icon="el-icon-bottom"
            plain
            @click="onSort(index, index + 1)"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-top"
            plain
            @click="onSort(index, index - 1)"
          ></el-button>
          <el-button type="text" plain @click="handleRowUpdate('edit', index)"> 编辑 </el-button>
          <el-button type="text" plain class="red" @click="handleRowDelete(index)">
            删除
          </el-button>
        </div>
      </div>
    </el-card>
    <common-dialog-form
      ref="commonForm"
      :visible.sync="visible"
      :title="drawerTitle"
      :content="formContent"
      :onConfirm="onConfirm"
    ></common-dialog-form>
    <common-dialog-form
      title="复制"
      size="small"
      :visible.sync="copyVisible"
      :content="copyFormContent"
      :onConfirm="onCopyConfirm"
    ></common-dialog-form>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'

import IconConfigDialog from './icon-config-dialog'
import SelfPageSelect from './self-page-select'
import CommonDialogForm from '@/components/common-dialog-form'
import * as api from '@/const/api'

export default {
  components: {
    CommonDialogForm,
  },
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      copyVisible: false,
      currentIndex: '',
    }
  },
  computed: {
    selectValue: {
      get() {
        return _clonedeep(this.value)
      },
      set(val) {
        // 触发v-model绑定值更新
        this.$emit('input', val)
      },
    },
    isEdit() {
      return typeof this.currentIndex === 'number'
    },
    // 侧边栏表单标题
    drawerTitle() {
      return this.isEdit ? '编辑' : '新增'
    },
    formContent() {
      return [
        {
          $id: 'titleZh',
          $type: 'input',
          label: '标题(中文)',
          $el: {
            placeholder: '请输入标题(中文)',
            clearable: true,
            maxlength: 50,
            showWordLimit: true,
          },
          rules: [{ required: true, message: '请输入标题(中文)', trigger: 'change' }],
        },
        {
          $id: 'titleEn',
          $type: 'input',
          label: '标题(英文)',
          $el: {
            placeholder: '请输入标题(英文)',
            clearable: true,
            maxlength: 50,
            showWordLimit: true,
          },
          rules: [{ required: true, message: '请输入标题(英文)', trigger: 'change' }],
        },
        {
          $id: 'subtitleZh',
          $type: 'input',
          label: '副标题(中文)',
          $el: {
            type: 'textarea',
            rows: 7,
            placeholder: '请输入副标题(中文)',
            clearable: true,
            maxlength: 1000,
            showWordLimit: true,
          },
        },
        {
          $id: 'subtitleEn',
          $type: 'input',
          label: '副标题(英文)',
          $el: {
            type: 'textarea',
            rows: 7,
            placeholder: '请输入副标题(英文)',
            clearable: true,
            maxlength: 1000,
            showWordLimit: true,
          },
        },
        {
          $id: 'icon',
          label: '图标',
          component: IconConfigDialog,
          $el: {
            isSingleSelect: true,
          },
          inputFormat: ({ icon }) => {
            if (!icon) {
              return []
            }

            return [icon]
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return {}
            }
            return {
              icon: val[0],
            }
          },
          rules: [{ required: true, message: '请选择图标', trigger: 'change' }],
        },
        {
          $id: 'url',
          label: '链接地址',
          component: SelfPageSelect,
        },
      ]
    },
    copyFormContent() {
      return [
        {
          $id: 'url',
          label: '链接地址',
          component: SelfPageSelect,
          class: 'w-1-1',
          $el: {
            hiddenBtn: true,
          },
        },
      ]
    },
  },
  methods: {
    // 重新排序
    onSort(index, last) {
      // 头尾不可分别向上下移动
      if (last < 0 || last === this.selectValue.length) {
        return
      }
      this.selectValue[index] = this.selectValue.splice(last, 1, this.selectValue[index])[0]
      this.$emit('input', _clonedeep(this.selectValue))
    },
    onConfirm(data) {
      if (this.isEdit) {
        this.selectValue[this.currentIndex] = data
      } else {
        this.selectValue.push(data)
      }
      this.$emit('input', _clonedeep(this.selectValue))
    },
    async onCopyConfirm({ url }) {
      try {
        const { code, msg, data } = await this.$axios.$get(`${api.solutionContent}/${url}`)

        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        const tabBox = JSON.parse(data.content).find(({ component }) => component === 'tab-box')
        this.$emit('input', _clonedeep(tabBox.componentData.list))
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    handleRowUpdate(type, index) {
      this.currentIndex = type === 'add' ? '' : index
      this.visible = true

      if (type === 'edit') {
        this.$refs.commonForm.updateForm(this.selectValue[index])
      }
    },
    handleRowDelete(index) {
      this.selectValue.splice(index, 1)
      this.$emit('input', _clonedeep(this.selectValue))
    },
  },
}
</script>

<style lang="less" scoped>
.tabin-config-dialog {
  .header {
    display: flex;
    justify-content: space-between;
  }

  :deep(.el-card) {
    margin-bottom: 5px;

    .el-card__body {
      padding: 10px;
    }
  }

  .card-row {
    display: flex;
    justify-content: space-between;

    .operation {
      display: flex;
    }
  }

  :deep(.el-dialog) {
    .el-dialog__header {
      margin-bottom: 10px;
      padding: 10px 20px 0;
    }
  }
}
</style>
